<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>${pageTitle}</title>
    <style>
        body, pre {
            margin: 0;
            padding: 0;
            font-family: Monaco, 'Lucida Console', monospace;
            background: #ECECEC
        }

        h1 {
            margin: 0;
            background: #A31012;
            padding: 20px 45px;
            color: #fff;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
            border-bottom: 1px solid #690000;
            font-size: 28px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            z-index: 1;
        }

        h2 {
            margin: 0;
            padding: 5px 45px;
            font-size: 12px;
            background: #333;
            color: #fff;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
            border-top: 4px solid #2a2a2a;
        }

        button {
            background: #AE1113;
            background: -webkit-linear-gradient(#AE1113, #A31012);
            background: -o-linear-gradient(#AE1113, #A31012);
            background: -moz-linear-gradient(#AE1113, #A31012);
            background: linear-gradient(#AE1113, #A31012);
            border: 1px solid #790000;
            padding: 3px 10px;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
            color: #fff;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            margin: 0 10px;
            display: inline-block;
            position: relative;
            top: -1px;
        }

        input {
            border: 1px solid #790000;
            border-radius: 3px;
            outline: none;
            height: 19px;
            padding: 2px 5px;
            top: -1px;
            position: relative;
            margin-left: 20px;
        }

        pre {
            padding: 5px 0 0 55px;
            border-bottom: 1px solid #DDD;
            text-shadow: 1px 1px 1px rgba(255, 255, 255, .5);
            color: #8B8B8B;
            font-size: 12px;
            bottom: 0;
        }

        .header {
            margin: 0;
            padding: 15px 45px;
            background: #F5A0A0;
            border-top: 4px solid #D36D6D;
            color: #730000;
            text-shadow: 1px 1px 1px rgba(255, 255, 255, .3);
            font-size: 14px;
            border-bottom: 1px solid #BA7A7A;
            position: fixed;
            top: 77px;
            left: 0;
            right: 0;
            z-index: 1;
        }

        #db-names {
            cursor: default;
            list-style: none;
            margin-bottom: 0;
            padding-top: 130px;
        }

        .db-name {
            border: 1px solid #8B8B8B;
            border-bottom: 0;
            padding: 10px 20px;
            border-radius: 3px 3px 0 0;
            display: inline-block;
            margin-left: 3px;
            cursor: pointer;
        }

        .db-name.select {
            background: #8B8B8B;
            color: #fff;
            text-shadow: 1px 1px 1px rgba(255, 255, 255, .3);
        }

        .diff {
            display: none;
        }

        .diff.select {
            display: block;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<h1>${title}</h1>
<form action="${migrationUri}" method="POST" target="target">
    <div class="header">
        <label>${description}</label>
        <button type="submit">${applyButtonText}</button>
    </div>
    <ul id="db-names">${dbNames}</ul>

    <div id="diffs">${diffs}</div>
</form>
<iframe name="target" src="about:blank" class="hide"></iframe>
<script>
    var dbNames = document.getElementById("db-names"),
            ifr = document.getElementsByName("target")[0],
            diffs = document.getElementById("diffs"),
            dnc = 'db-name select',
            dfc = 'diff select',
            dfs = diffs.childNodes,
            df = dfs[0],
            dn = dbNames.childNodes[0];
    function getTarget(e) {
        return e.srcElement ? e.srcElement : e.target;
    }
    ifr.onload = function () {
        location.reload(true);
    };
    dbNames.onclick = function (e) {
        var t = getTarget(e);
        if (t.className == 'db-name') {
            dn.className = 'db-name';
            df.className = 'diff';

            df = dfs[t.getAttribute('i')];
            dn = t;
            t.className = dnc;
            df.className = dfc;
        }
    };
    dn.className = dnc;
    df.className = dfc;
</script>
</body>
</html>